<template>
	<view class="qxlj_back4 contain" style="">
		<view>西岭雪山近七日人流量统计(峰值人次)</view>
		<canvas canvas-id="barChart" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}" />
	</view>
</template>

<script>
	import {
		getMonthAll,
	} from '@/api/qxlj.js';
	export default {
		data() {
			return {
				title: 'Hello',
				canvasWidth: 400,
				canvasHeight: 400,
				list: [],
			}
		},
		onLoad() {

		},
		onReady() {
			this.getList();
		},
		methods: {
			async getList() {
				try {
					const {
						Data
					} = await getMonthAll({});
					this.list = Data.TouristLatestSevStatisticsModelList;
					let barChartData = {
						labels: [],
						values: []
					};
					this.list.forEach(con => {
						barChartData.labels.push(con.DayDate.substring(0, 10));
						barChartData.values.push(con.TotalCount)
					})
					console.log(barChartData);
					//this.draw(barChartData);
					let that = this;
					uni.getSystemInfo({
						success: (res) => {
							const deviceWidth = res.windowWidth; // 获取设备宽度
							that.canvasWidth = deviceWidth;
							//that.canvasHeight=res.windowHeight/2;
							setTimeout(() => {
								that.drawFive(barChartData)
							}, 500)

						}
					});
				} catch (e) {
					//TODO handle the exception
				}
			},
			drawFive(barChartData) {
				const YLHeight = 60; //预留高度
				const ctx = uni.createCanvasContext('barChart', this);
				const barMargin = 10;
				const maxValue = Math.max(...barChartData.values);
				const scaleY = (this.canvasHeight - YLHeight * 2) / maxValue; // 40 表示留出底部标签和顶部文字的高度
				// 计算柱状图的宽度，并根据画布宽度居中显示
				const barWidth = (this.canvasWidth / (barChartData.values.length + 1)) - barMargin - 10;
				const startX = (this.canvasWidth - (barWidth + barMargin) * barChartData.values.length) / 2;
				// 绘制纵坐标刻度线和文字
				ctx.setStrokeStyle('#999');
				ctx.setFillStyle('#000');
				ctx.setFontSize(12);
				ctx.setTextAlign('right');
				const scaleCount = 5; // 刻度线数量
				const scaleValue = Math.ceil(maxValue / scaleCount); // 刻度线间距
				for (let i = 0; i <= scaleCount; i++) {
					const scaleHeight = i * scaleValue * scaleY + YLHeight;
					const scaleText = i * scaleValue;
					ctx.beginPath();
					ctx.moveTo(startX - 5, this.canvasHeight - scaleHeight);
					ctx.lineTo(this.canvasWidth - startX, this.canvasHeight - scaleHeight);
					ctx.stroke();
					ctx.fillText(scaleText.toString(), startX - 10, this.canvasHeight - scaleHeight);
				}

				for (let i = 0; i < barChartData.values.length; i++) {
					const label = barChartData.labels[i];
					const value = barChartData.values[i];
					const barX = startX + i * (barWidth + barMargin);
					const barY = this.canvasHeight - value * scaleY - YLHeight;
					const barHeight = value * scaleY;

					ctx.setFillStyle('#99ccff');
					ctx.fillRect(barX, barY, barWidth, barHeight);

					let textY = barY - 5;

					if (barHeight / this.canvasHeight < 0.3) { // 如果柱形高度占画布高度比例小于 0.3，就把顶部文字显示在柱形的内部
						textY = barY - barHeight * 0.05;
					} else if (barY < 24) { // 如果柱形顶部超出画布上边缘，就把顶部文字显示在柱形的外部
						textY = barY + barHeight * 0.15;
					}

					// 绘制顶部文字
					ctx.setFontSize(12);
					ctx.setTextAlign('center');
					ctx.setTextBaseline('bottom');
					ctx.setFillStyle('#000');
					if (1 == 1 || barHeight > 16) { // 只有当柱形高度大于 16 时才绘制顶部文字，避免太小的柱形顶部文字重叠
						ctx.fillText(value.toString(), barX + (this.canvasWidth / (barChartData.values.length + 1) -
							barMargin) / 2, textY);
					}
					ctx.setTextAlign('center');
					ctx.setTextBaseline('top');

					// 绘制柱形底部的标签
					const RtextX = barX + (barWidth + barMargin) / 2;
					const RtextY = this.canvasHeight - 30;
					ctx.save();
					ctx.translate(RtextX, RtextY);
					ctx.rotate(45 * Math.PI / 180);
					ctx.fillText(label, 0, 0);
					ctx.restore();
					// ctx.setTextAlign('center');
					// ctx.setTextBaseline('top');
					// ctx.fillText(label, barX + (this.canvasWidth / (barChartData.values.length + 1) - barMargin) / 2, this.canvasHeight-20); // 绘制柱形底部的标签
				}

				ctx.draw();
			},


		}
	}
</script>

<style scoped>
	.contain {
		padding-top: 20%;
		text-align: center;
		min-height: 100vh;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>